import React, {Component} from 'react';
import './index.css'

class List extends Component {
    render() {
        const {users,isFirst,isLoading,err} = this.props
        return (
            <div className='row'>
                {
                    isFirst? <h2>欢迎使用，输入关键字 点击搜索</h2> :
                    isLoading?<h2>Loading...</h2> :
                    err?<h2>{err}</h2>:
                    users.map((userObj)=>{
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                    <img alt="头像图片" src={userObj.avatar_url} style={{width:"100px",height:"100px"}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }

                {/*<div className="card">*/}
                {/*    <a rel="noreferrer" href="https://github.com/reactjs" target="_blank">*/}
                {/*        <img alt="头像图片" src="https:avatars.githubusercontent.com/u/6412038?v=3" style={{width:"100px",height:"100px"}}/>*/}
                {/*    </a>*/}
                {/*    <p className="card-text">reactjs</p>*/}
                {/*</div>*/}
                {/*<div className="card">*/}
                {/*    <a rel="noreferrer" href="https://github.com/reactjs" target="_blank">*/}
                {/*        <img alt="头像图片" src="https:avatars.githubusercontent.com/u/6412038?v=3" style={{width:"100px",height:"100px"}}/>*/}
                {/*    </a>*/}
                {/*    <p className="card-text">reactjs</p>*/}
                {/*</div>*/}
            </div>
        );
    }
}

export default List;